/**
* Created by wust on 2020-07-03 20:26:45.
*/
<template>
	<div id="test" v-loading="loading">
		<el-tabs v-model="editableTabsValue" @tab-remove="removeTab">
			<el-tab-pane :name="defaultActiveName" label="XXX列表">
				<test-search-bar v-on:search="search"></test-search-bar>
				<el-button-group style="margin-bottom: 7px;float: left;">
					<el-button size="mini" type="primary" @click="create" v-has-permission="'TestList2.create'" icon="el-icon-plus">新建</el-button>
					<el-button size="mini" type="primary" @click="update" v-has-permission="'TestList2.update'" icon="el-icon-edit">修改</el-button>
					<el-button size="mini" type="primary" @click="deleteById" v-has-permission="'TestList2.delete'" icon="el-icon-delete">删除</el-button>
					<el-button size="mini" type="primary" @click="importByExcel" v-has-permission="'TestList2.import'" icon="el-icon-upload2">导入</el-button>
					<el-button size="mini" type="primary" v-export-excel-directive="exportExcelPar" v-has-permission="'TestList2.export'"
					 icon="el-icon-download">导出</el-button>
					 <el-button size="mini" type="primary" icon="el-icon-download" @click="pdf">电子合同测试</el-button>
				</el-button-group>
				<el-table border size="mini" :data="baseDto.lstDto" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="名字" prop="name" width="120">
					</el-table-column>
					<el-table-column label="值" prop="valueLabel" width="120">
					</el-table-column>

					<el-table-column prop="createrName" label="创建人" width="210">
					</el-table-column>
					<el-table-column label="创建时间" width="180">
						<template slot-scope="scope">
							<i class="el-icon-time"></i>
							<span style="margin-left: 10px">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="modifyName" label="更新人" width="210">
					</el-table-column>
					<el-table-column label="最后更新时间" width="180">
						<template slot-scope="scope">
							<i class="el-icon-time"></i>
							<span style="margin-left: 10px">{{ scope.row.modifyTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="pageSizeChange" @current-change="pageIndexChange" :current-page="searchModel.pageDto.pageNum"
				 :page-sizes="searchModel.pageDto.pageSizes" :page-size="searchModel.pageDto.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="baseDto.page.total">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane v-for="(item) in editableTabs" :key="item.key" :label="item.label" :name="item.name" closable>
				<test-create v-if="item.key == 'create'"></test-create>
				<test-update v-if="item.key == 'update'" v-bind:selectedModel="selectedModel"></test-update>
				<test-import v-if="item.key == 'import'"></test-import>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import Vue from 'vue'
import TestCreate from './test-create'
import TestUpdate from './test-update'
import TestSearchBar from './test-search-bar'
import TestImport from './test-import'

export default {
  name: 'test-list',
  components: {
    TestSearchBar,
    TestUpdate,
    TestCreate,
    TestImport
  },
  data () {
    return {
      loading: true,
      searchModel: {
        pageDto: {
          pageSize: 10,
          pageNum: 1,
          pageSizes: [10, 20, 50, 100]
        },
        name: null
      },
      baseDto: {
        page: {
          total: 0
        }
      },
      selectedModel: {},
      exportExcelPar: {
        fileType: 'xls',
        xmlName: 'demo2_server_test',
        moduleName: 'test',
        server: Vue.$demo2ServerURL
      },
      defaultActiveName: 'TestList',
      editableTabsValue: 'TestList',
      editableTabs: [],
      tabIndex: 2,
      checkedDataList: [] // 选择的数据集合
    }
  },
  created: function () {
    this.listPage()
  },
  methods: {
    handleSelectionChange: function (val) {
      this.checkedDataList = val
    },
    listPage: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$demo2ServerURL + '/web/v1/TestController/listPage',
        data: this.searchModel
      }).then(res => {
        this.loading = false
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    pageSizeChange: function (e) {
      this.searchModel.pageDto.pageSize = e
      this.listPage()
    },
    pageIndexChange: function (e) {
      this.searchModel.pageDto.pageNum = e
      this.listPage()
    },
    search: function (p) {
      if (!p.isCollapse) { // 非高级查询，则只需要根据关键字查询
        this.searchModel.name = p.searchKey
      } else {
        this.searchModel = p.searchModel
      }
      this.searchModel.pageDto.pageNum = 1
      this.loading = true
      this.listPage()
    },
    create: function () {
      this.addTab('新建XXX', 'CreateTest', 'create')
    },
    update: function () {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return
      }

      let data = this.checkedDataList[0]

      this.selectedModel = data
      this.addTab('编辑-' + data.name, data.id + '', 'update')
    },
    deleteById: function () {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return
      }

      let data = this.checkedDataList[0]

      this.$confirm('您确定删除该记录吗？', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        Vue.$ajax({
          method: 'delete',
          url: Vue.$demo2ServerURL + '/web/v1/TestController/' + data.id
        }).then(res => {
          this.loading = false
          if (res.data.flag !== 'SUCCESS') {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.listPage()
          }
        })
      }).catch(() => {})
    },
    importByExcel: function () {
      this.addTab('导入数据', 'ImportTest', 'import')
    },
    pdf: function () {
      Vue.$ajax({
		  method: 'post',
		  url: Vue.$demo2ServerURL + '/web/v1/TestController/pdf'
      }).then(res => {

      })
    },
    addTab: function (label, name, key) {
      let ele = {
        label: label,
        name: name,
        key: key
      }
      let flag = false

      for (let i = 0; i < this.editableTabs.length; i++) {
        let var1 = this.editableTabs[i]
        if (var1.name === name) {
          flag = true
          break
        }
      }

      if (!flag) {
        this.editableTabs.push(ele)
      }
      this.editableTabsValue = name
    },
    removeTab: function (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            } else {
              activeName = this.defaultActiveName
              this.listPage()
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    clickTab: function (tab) {
      if (tab.name === this.defaultActiveName) {
        this.listPage()
      }
    }
  }
}
</script>
